import React from 'react';
import ThemeItem from './Item';
import {Col, Row} from 'antd';
import { WeaSelect, WeaLocaleProvider } from 'ecCom';
import classNames from 'classnames';
import ColorPicker from 'rc-color-picker';
import {fontFamilyOpts, fontSizeOpts} from "../../../../../../constants/theme";
const getLabel = WeaLocaleProvider.getLabel;

const spaceOpts = () => {
  return [
    { key: '10px', selected: false, showname: getLabel('511802','紧凑')},
    { key: '15px', selected: false, showname: getLabel('511801','普通')},
    { key: '20px', selected: false, showname: getLabel('511803','宽松')}
  ]
};

const scope = 'field.css';

export default class ThemeFieldSetting extends React.Component {
  formatFW = () => {
    const { fontWeight } = this.props.data.css;

    if('bold' === fontWeight) return 'normal';

    return 'bold';
  }

  render() {
    const { data, onChange } = this.props;
    const { fontFamily, fontSize, color, fontWeight } = data.css;
    const bold = 'bold' === fontWeight;

    return (
      <div>
        <h4>{getLabel('511804','字段')}</h4>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@i7fow8`} label={getLabel('511805','字体样式')}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1lubke`} style={{ padding: 0 }}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@curwhp`} span={7}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@sgqkl0`}
                value={fontFamily}
                options={fontFamilyOpts()}
                onChange={onChange(`${scope}.fontFamily`)}
              />
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k7ih78`} span={6} offset={1}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@87oeou`}
                value={fontSize}
                options={fontSizeOpts()}
                onChange={onChange(`${scope}.fontSize`)}
              />
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rn92zf`} span={4} offset={1}>
              <span
                onClick={onChange(`${scope}.fontWeight`, this.formatFW)}
                className={classNames('btn-font-weight', { bold })}
              >
                B
              </span>
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4im4dk`} span={4} offset={1}>
              <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@jj22se`}
                color={color}
                onChange={onChange(`${scope}.color`)}
              />
            </Col>
          </Row>
        </ThemeItem>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@wah9b9`} label={getLabel('511806','间距')}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@sqrfpf`} 
            value={data.space}
            options={spaceOpts()}
            onChange={onChange('field.space')}
          />
        </ThemeItem>
      </div>
    )
  }
}